<template>
    <vxe-card :border="false" :padding="false" width="100%">
        <vxe-tabs v-model="selectType" padding>
            <vxe-tab-pane title="待处理" name="1">
                <vxe-grid v-bind="gridOptions1">
                    <template #action>
                        <vxe-button mode="text" status="primary">通过</vxe-button>
                        <vxe-button mode="text" status="error">驳回</vxe-button>
                    </template>
                </vxe-grid>
            </vxe-tab-pane>
            <vxe-tab-pane title="已处理" name="2">
                <vxe-grid v-bind="gridOptions2"></vxe-grid>
            </vxe-tab-pane>
        </vxe-tabs>
    </vxe-card>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue'
import type {VxeGridProps} from 'vxe-table'

interface RowVO {
    id: number
    name: string
    type: string
    status: string
}

const selectType = ref('1')

const list = [
    {id: 10001, name: 'Test1', type: 'Develop', status: 'Man'},
    {id: 10002, name: 'Test2', type: 'Test', status: 'Women'},
    {id: 10003, name: 'Test3', type: 'PM', status: 'Man'},
    {id: 10004, name: 'Test4', type: 'Designer', status: 'Women'}
]

// 模拟接口
const findPageList = (pageSize: number, currentPage: number) => {
    return new Promise<{
        data: RowVO[]
        page: {
            total: number
        }
    }>(resolve => {
        setTimeout(() => {
            resolve({
                data: list.slice((currentPage - 1) * pageSize, currentPage * pageSize),
                page: {
                    total: list.length
                }
            })
        }, 100)
    })
}

const gridOptions1 = reactive<VxeGridProps<RowVO>>({
    loading: false,
    showOverflow: true,
    toolbarConfig: {
        refresh: true
    },
    pagerConfig: {},
    columns: [
        {type: 'seq', width: 70},
        {field: 'type', title: '类型', width: 120},
        {field: 'name', title: '名称'},
        {field: 'status', title: '状态', width: 120},
        {field: 'action', title: '操作', width: 140, slots: {default: 'action'}}
    ],
    proxyConfig: {
        ajax: {
            query({page}) {
                return findPageList(page.pageSize, page.currentPage)
            }
        }
    }
})

const gridOptions2 = reactive<VxeGridProps<RowVO>>({
    loading: false,
    showOverflow: true,
    toolbarConfig: {
        refresh: true
    },
    pagerConfig: {},
    columns: [
        {type: 'seq', width: 70},
        {field: 'type', title: '类型', width: 120},
        {field: 'name', title: '名称'},
        {field: 'status', title: '状态', width: 120}
    ],
    proxyConfig: {
        ajax: {
            query({page}) {
                return findPageList(page.pageSize, page.currentPage)
            }
        }
    }
})
</script>
